<template>
  <div class="org-modify-wrap">
    <el-dialog :visible.sync="dialogVisible_all.show" center>
      <div class="show-title">计划ID：{{ schedule_id }}</div>
      <div class="show-title">计划名称：{{ desc_check }}</div>
      <div class="center">
        <el-timeline>
          <el-timeline-item
            timestamp="周一"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_1.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_1"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div class="nodata" v-else><el-card>暂无</el-card></div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            timestamp="周二"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_2.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_2"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div class="nodata" v-else><el-card>暂无</el-card></div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            timestamp="周三"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_3.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_3"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div v-else><el-card class="nodata">暂无</el-card></div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            timestamp="周四"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_4.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_4"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div class="nodata" v-else><el-card>暂无</el-card></div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            timestamp="周五"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_5.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_5"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div class="nodata" v-else><el-card>暂无</el-card></div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            timestamp="周六"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_6.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_6"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div class="nodata" v-else><el-card>暂无</el-card></div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            timestamp="周日"
            placement="top"
            type="primary"
            color="#0bbd87"
            size="normal"
          >
            <div class="wrap-item">
              <div class="have" v-if="week_arr_7.length > 0">
                <el-card
                  class="con"
                  v-for="(item, index) in week_arr_7"
                  :key="index"
                >
                  <span class="time-box"
                    >{{ item.start_time }}-{{ item.end_time }}</span
                  >
                </el-card>
              </div>
              <div class="nodata" v-else><el-card>暂无</el-card></div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";

export default {
  name: "audit",
  props: {
    schedule_id: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
    dialogVisible_all: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
  },
  data() {
    return {
      schedule_id_check: "",
      desc_check: "",
      week_arr_1: [],
      week_arr_2: [],
      week_arr_3: [],
      week_arr_4: [],
      week_arr_5: [],
      week_arr_6: [],
      week_arr_7: [],
      //   activities: [
      //     {
      //       content: "支持使用图标",
      //       timestamp: "2018-04-12 20:46",
      //       size: "large",
      //       type: "primary",
      //       icon: "el-icon-more",
      //     },
      //     {
      //       content: "支持自定义颜色",
      //       timestamp: "2018-04-03 20:46",
      //       color: "#0bbd87",
      //     },
      //     {
      //       content: "支持自定义尺寸",
      //       timestamp: "2018-04-03 20:46",
      //       size: "large",
      //     },
      //     {
      //       content: "默认样式的节点",
      //       timestamp: "2018-04-03 20:46",
      //     },
      //   ],
    };
  },
  watch: {
    schedule_id: {
      handler(newVal) {
        this.schedule_id_check = newVal;
      },
      immediate: true,
    },
    desc: {
      handler(newVal) {
        this.desc_check = newVal;
      },
      immediate: true,
    },
  },
  mounted() {
    this.getList_1();
    this.getList_2();
    this.getList_3();
    this.getList_4();
    this.getList_5();
    this.getList_6();
    this.getList_7();
  },
  methods: {
    //1
    getList_1() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 1,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_1 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //2
    getList_2() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 2,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_2 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //3
    getList_3() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 3,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_3 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //4
    getList_4() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 4,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_4 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //5
    getList_5() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 5,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_5 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //6
    getList_6() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 6,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_6 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //7
    getList_7() {
      postData("/adminweb/mem/schedule/serial/list", {
        schedule_id: this.schedule_id,
        weekday: 7,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.week_arr_7 = res.datas.serials;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
  },
};
</script>

<style scoped>
.center {
  margin-top: 30px;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow-y: scroll;
}
.show-title {
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  color: #676a6d;
}

.org-modify-wrap >>> .el-dialog {
  width: 40%;
}
.org-modify-wrap >>> .el-card {
  height: 40px;
  margin-bottom: 5px;
  line-height: 40px;
  padding: 0 10px;
}
.org-modify-wrap >>> .el-card__body {
  padding: 0;
}
.org-modify-wrap >>> .el-timeline-item__timestamp.is-top {
  color: #0bbd87;
}
.org-modify-wrap >>> .el-timeline {
  width: 80%;
  margin-left: 5px;
}
.org-modify-wrap >>> .el-dialog {
  /* width: 70%; */
  height: 600px;
}
/* .time-box {
  padding-left: 20px;
}
.nodata{
 margin-left: 20px;
} */
</style>
